<template>
  <div>
    <Title :title="'建设设备分析'"/>
    <header>
      <strong></strong>
      <span>建设设备总数：</span>
      <b>124</b>
    </header>
    <div class="box">
      <div class="boxItem" v-for="(item, index) in deviceList.deviceStatusInfo" :key="index">
        <div class="boxItemTop">
          <img :src="`[publicPath]static/images/global/${item.type}.png`" alt="">
          <span>{{typeList[item.type]}}</span>
          <b>{{ item.onlineNum + item.offlineNum + item.exNum }}</b>
        </div>
        <div class="boxItemBot">
          <div><i></i><span>在线</span><b>{{ item.onlineNum }}</b></div>
          <div><i></i><span>离线</span><b>{{ item.offlineNum }}</b></div>
          <div><i></i><span>故障</span><b>{{ item.exNum}}</b></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
import Title from '../title.vue'
// import { xiaoche } from '@/assets/images/imagesIn'

import { getDeviceStatistic } from '../../../../utils/apiComponent'
export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      typeList: {
        '001': 'RSU',
        '002': 'MEC',
        '003': '摄像机',
        '004': '毫米波雷达',
        '005': '激光雷达',
        '009': '红绿灯'
      },
      deviceList: {
        sumNum: 10,
        deviceStatusInfo:[ 
{type: '001', onlineNum: 2, offlineNum: 3, exNum: 0}, {type: '001', onlineNum: 2, offlineNum: 3, exNum: 0},
{type: '001', onlineNum: 2, offlineNum: 3, exNum: 0}, {type: '001', onlineNum: 2, offlineNum: 3, exNum: 0},
{type: '001', onlineNum: 2, offlineNum: 3, exNum: 0}, {type: '001', onlineNum: 2, offlineNum: 3, exNum: 0}]
      }
    })
    const refData = toRefs(data)
    const initData = () => {
      getDeviceStatistic().then((res) => {
        console.log(res)
        data.deviceList = res
      })
    }
    onMounted(() => {
      initData()
    })
    return {
      ...refData,
    }
  }
})
</script>

<style lang="less" scoped>
@import '../../common.less';
header{
  width: 100%;
  height: 68px;;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  strong{
    width: 68px;
    height: 68px;
    background-image: url('@{publicPath}static/images/global/main3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;;
    display: block;
    margin-right: 20px;
  }
  span{
    font-size: 24px;
    color: #fff;
    margin-right: 20px;
  }
  b{
    font-size: 28px;
    color: #4DC8FF;
  }
}
.box{
  width: 100%;
  .boxItem{
    width: calc(50% - 30px;);
    display: inline-block;
    // background: pink;
    margin-bottom: 20px;
    .boxItemTop{
      width: 100%;
      height: 36px;;
      background: rgba(48, 81, 120, 0.40);
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 5px;
      img{
        width: 36px;
        height: 36px;;
        margin: 0 6%
      }
      span, b{
        width: 50%;
        font-size: 20px;
        color: #4DC8FF;
      }
      b{
        width: 20%;
        text-align: center;;
      }
    }
    .boxItemBot{
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      div{
        width: 33%;
        line-height: 20px;
        height: 20px;;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;;
        i{
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 15px;
        }
        b{
          margin-left: 5px;
        }
      }
      div:nth-child(1) i {
        background: #00FF6C;
      }
      div:nth-child(2) i {
        background: #BCBCBC;
      }
      div:nth-child(3) i {
        background: #FFC400;
      }
    }
  }
  .boxItem:nth-child(odd){
    margin-right: 60px;;
  }
}
</style>